<template>
  <div class="login">
    <div class="bg">
    </div>
    <Modal class="login-modal" v-model="loginModal" width="360" :closable="false" :mask-closable="false">
      <div>
        <h2 style="margin:10px;color:#abcdef;text-align:center">
          <img :src="require('@/assets/img/logo.png')" alt="" height="50"></h2>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
          <Form-item prop="name">
            <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
          </Form-item>
          <Form-item prop="password">
            <Input v-model="formValidate.password" type="password" placeholder="请输入密码"></Input>
          </Form-item>

          <Row>
            <Col span="12">
            <Checkbox v-model="formValidate.remember">记住登录状态（30 天）</Checkbox>
            </Col>
            <Col span="12">
            <a style="float:right" @click="toRegister">新用户注册</a>
            </Col>
          </Row>

        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" long :loading="modal_loading" @click="handleSubmit('formValidate')">登录
        </Button>
        <small style="text-align: center;display:block" class="subText">@copyright by zhufeng</small>
      </div>
    </Modal>
  </div>
</template>
<script>
import Cookies from 'js-cookie'

export default {
  name: 'login',
  data() {
    return {
      loginModal: true,
      modal_loading: false,
      redirect: '/',
      formValidate: {
        name: '',
        password: '',
        remember: false
      },
      ruleValidate: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码错误', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init() {
      let token = Cookies.get('token')
      let redirect = this.$route.query.redirect
      if (redirect !== undefined) {
        this.redirect = redirect
      }
      if (token) {
        this.$Message.success('登录成功!')
        this.$router.push(this.redirect)
      }
    },
    handleSubmit(name) { // login
      this.$refs[name].validate((valid) => {
        this.modal_loading = true
        setTimeout(() => {
          this.modal_loading = false
          if (valid) {
            if (this.formValidate.remember) {
              Cookies.set('token', 1, { expires: 30 })
            } else {
              Cookies.set('token', 1)
            }
            this.$Message.success('登录成功!')
            this.$router.push(this.redirect)
          } else {
            this.$Message.error('表单验证失败!')
            this.$Notice.warning({
              title: '登录提示',
              desc: '用户名/密码 随意输入...'
            })
          }
        }, 2000)
      })
    },
    toRegister() {
      this.$router.push('/register')
    }
  },
  created() {
    this.init()
  }
}
</script>


